<template>
  <div>
    <div>{{$store.state.news}}</div>

<h2>{{$store.state.books}}</h2>
    <h1>购物车综合案例练习</h1>
    <label for="">商品名称</label>
    <input type="text" name="" id="" v-model="name" />
    <label for="">商品价格</label>
    <input type="text" name="" id="" v-model.number="price" />
    <button @click="addGoods">点击添加商品</button>
    <button @click="allDelete">全部删除</button>

    <table class="tBox">
      <thead>
        <tr>
          <th>商品选中状态</th>
          <th>商品序号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>数量修改</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(item, index) in goodsList"
          :key="index"
          :class="item.flag ? 'active' : ''"
        >
          <td>
            <input type="checkbox" name="" id="" v-model="item.flag" />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td v-show="item.count > 0">{{ item.count }}</td>
          <td>
            <button @click="addCount(item)">++</button>

            <button>--</button>
          </td>
          <td>
            <button @click="mydelete(item)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr v-if="totalCount !== 0">
          <td colspan="2">总数量：{{ selectCount }} / {{ totalCount }}</td>
          <td colspan="2">总价: {{ totalPrice | moneyChange("人民币") }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
function getData() {
  return [
    {
      id: 1,
      name: "热玛吉",
      price: 20000,
      flag: false,
    },
    {
      id: 2,
      name: "耗子尾汁",
      price: 1000,
      flag: false,
    },
    {
      id: 3,
      name: "vue",
      price: 2000,
      flag: true,
    },
  ];
}

export default {
  data() {
    return {
      name: "",
      price: "",
      goodsList: [],
      arr:[1,2,3]
    };
  },
  created() {
    this.goodsList = getData();
  },
  mounted() {},
  methods: {
    //添加商品
    addGoods() {
      if (!this.name.trim()) {
        alert("商品名称不能为空");
        return;
      }
      if (this.price < 0) {
        alert("商品价格不能为负数");
        this.price = "";
        return;
      }

      
      if (typeof this.price != "number") {
        alert("商品价格必须是数字");
        this.price = "";
        return;
      }

      let id = this.goodsList.length;
      id++;

      let obj = { id: id, name: this.name, price: this.price };

      console.log(obj);

      this.goodsList.push(obj);
      this.name = "";
      this.price = "";
    },
    //删除商品
    // mydelete(currentItem) {
    //    let newArr= this.goodsList.filter(item=>{
    //         if(item.id !==currentItem.id) {
    //             return true
    //         }
    //     })

    //     console.log(newArr)
    //     this.goodsList=newArr

    // }

    //单个商品删除
    mydelete(currentItem) {
      this.goodsList = this.goodsList.filter(
        (item) => item.id !== currentItem.id
      );
    },

    //全部删除
    allDelete() {
      let flag = window.confirm("是否要全部删除");
      if (flag) {
        this.goodsList = [];
      }
    },
    //商品数量添加
   
     addCount(currentItem) {
      if (!currentItem.count) {
        // currentItem.count = 1;  // model 的数据被改了 但是页面上不会实现响应式更新
        // this.$set('target','key','val')
        this.$set(currentItem,'count',1)
      } else {
        currentItem.count++;
      }

    
    }



  },

  computed: {
    totalPrice() {
      let totalP = this.goodsList.reduce((pre, current, index) => {
        //    return     pre+current.price  //所有的总价
        if (current.flag) {
          return pre + current.price;
        } else {
          return pre;
        }
      }, 0);

      return totalP;
    },
    selectCount() {
      let count = 0;
      this.goodsList.forEach((item) => {
        if (item.flag) {
          count++;
        }
      });
      return count;
    },
    totalCount() {
      return this.goodsList.length;
    },
  },
  filters: {
    moneyChange: function (val, xxx) {
      return val + xxx;
    },
  },



};
</script>

<style scoped   lang='css'>
.tBox {
  margin: 0 auto;
  width: 800px;
}

.active {
  background-color: pink;
}
</style>
